import React, { useState } from 'react';
import { Form, Col, Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import {
  FormItemMap,
  CustomItemMap,
} from '@/pages/DarkPleaseCloseYourEyes/Form/components/FormItemTypeRender';
import type {
  IFormItemType,
  IFormItemRenderBox,
} from '@/pages/DarkPleaseCloseYourEyes/Form/components/FormItemTypeRender';

export const FormItemRenderBox: IFormItemRenderBox = (formItemConfig) => {
  const { item, not, children } = formItemConfig;
  const {
    type = 'input',
    placeholder = '请输入',
    name,
    label,
    span = 10,
    offset = 1,
    pull = 0,
    labelCol,
    tips = '',
    className = '',
  }: IFormItemType = item;

  // key渲染
  if (CustomItemMap[item.name] && !not) {
    return <>{CustomItemMap[item.name](formItemConfig)}</>;
  }

  // type渲染
  return (
    <Col span={span} offset={offset} pull={pull} className={className}>
      {FormItemMap[type] && (
        <Form.Item
          labelCol={labelCol}
          label={
            // label提示
            <>
              {tips ? (
                <>
                  {label}
                  <span style={{ marginLeft: 5 }}>
                    <Tooltip placement="top" title={tips}>
                      <QuestionCircleOutlined />
                    </Tooltip>
                  </span>
                </>
              ) : (
                label
              )}
            </>
          }
          name={name}
          rules={[{ required: true, message: '请输入' + item.label }]}
        >
          {children ? children : FormItemMap[type](formItemConfig)}
        </Form.Item>
      )}
    </Col>
  );
};

const FormItemRender = (props: any) => {
  const { config } = props;

  return (
    <>
      {config.map((item: any, index: number) => {
        const config = {
          item,
          ...props,
        };
        return (
          <FormItemRenderBox
            key={item.name + index}
            {...config}
          ></FormItemRenderBox>
        );
      })}
    </>
  );
};

export default FormItemRender;
